<template>
	<view class="my-wrapper">
		<view class="my-info-container">
			<view class="" :style="{ height: `${statusBarHeight}px`}"></view>
			<view class="my-title">我的</view>
			<view class="my-infomation flex-c-s">
				<view class="my-avarta-nikname-account flex-c">
					<image class="my-avarta-img" :src="userInfo.portrait || '/static/images/default-img.png'" mode=""></image>
					<view class="my-nicname">
						<view class="my-nikname-txt">
							<text v-show="userInfo.nickName">{{userInfo.nickName}}</text>
							<text @click="login()" v-show="!userInfo.nickName">请登录</text>
						</view>
						<view class="my-account-info flex-c" v-show="userInfo.phone">
							<image class="phone-img" src="/static/images/dianhua.png" mode=""></image>
							<text class="my-phone-number">{{userInfo.phone}}</text>
						</view>
					</view>
				</view>
				<view class="qr-setting-wrapper">
					<!-- <image class="my-tools" src="/static/images/erweima.png" mode=""></image> -->
					<image @click="toLink(1)" class="my-tools" src="/static/images/seting.png" mode=""></image>
				</view>
			</view>
			<view class="my-property-wrapper flex-c-s" style="justify-content:space-between;">
				<view class="property-item" @click="toLink(4)">
					<view class="property-item-num">{{assetsInfo?.jindouBalance || 0}}</view>
					<view class="property-item-desc">金豆</view>
				</view>
				<view class="property-item" @click="toLink(3)">
					<view class="property-item-num">{{assetsInfo?.goldBalance || 0}}</view>
					<view class="property-item-desc">余额</view>
				</view>
				<view class="property-item">
					<view class="property-item-num">-</view>
					<view class="property-item-desc">优惠券</view>
				</view>
			</view>
		</view>
		
		<view class="my-order-wrapper conteainer-public-style">
			<view class="order-title flex-c-s b-b-1">
				<view class="" style="font-size: 30rpx;color: #333;">
					我的订单
				</view>
				<view class="flex-c" @click="gotoOrder(0)">
					<text style="font-size: 26rpx;color: #999999;">全部订单</text>
					<uni-icons type="forward" color="#999999" size="16"></uni-icons>
				</view>
			</view>
			<view class="order-category-list flex-c-s">
				<view class="order-category-item" @click="gotoOrder(1)">
					<image  class="order-category-item-img" src="/static/images/daifahuo-3@2x.png" mode=""></image>
					<view class="order-category-item-desc">全部</view>
				</view>
				<view class="order-category-item" @click="gotoOrder(1)">
					<image  class="order-category-item-img" src="/static/images/daifukuan-2@2x.png" mode=""></image>
					<view class="order-category-item-desc">待付款</view>
				</view>
				<!-- <view class="order-category-item" @click="gotoOrder(2)">
					<image  class="order-category-item-img" src="/static/images/daifahuo-3@2x.png" mode=""></image>
					<view class="order-category-item-desc">待发货</view>
				</view>
				<view class="order-category-item" @click="gotoOrder(3)">
					<image  class="order-category-item-img" src="/static/images/peisongzhong@2x.png" mode=""></image>
					<view class="order-category-item-desc">待收货</view>
				</view> -->
				<view class="order-category-item" @click="gotoOrder(4)">
					<image  class="order-category-item-img" src="/static/images/yiwancheng@2x.png" mode=""></image>
					<view class="order-category-item-desc">已完成</view>
				</view>
				<view class="order-category-item" @click="gotoOrder(5)">
					<image  class="order-category-item-img" src="/static/images/Frame43@2x.png" mode=""></image>
					<view class="order-category-item-desc">已取消</view>
				</view>
			</view>
		</view>
		
		<view class="my-cell-list-wrapper conteainer-public-style" style="padding: 0 24rpx;">
			<view class="my-cell-item b-b-1 flex-c"  @click="toLink(6)">
				<image class="my-cell-item-img" src="/static/images/Frame39@2x.png" mode=""></image>
				<text class="my-cell-item-desc">我的预约</text>
			</view>
			<!-- <view class="my-cell-item b-b-1 flex-c">
				<image class="my-cell-item-img" src="/static/images/Frame39@2x.png" mode=""></image>
				<text class="my-cell-item-desc">保洁功能</text>
			</view> -->
			<view class="my-cell-item b-b-1 flex-c" @click="toLink(3)">
				<image class="my-cell-item-img" src="/static/images/shouye@2x.png" mode=""></image>
				<text class="my-cell-item-desc">我的余额</text>
			</view>
			<view class="my-cell-item flex-c" @click="toLink(4)">
				<image class="my-cell-item-img" src="/static/images/Frame40@2x.png" mode=""></image>
				<text class="my-cell-item-desc">我的金豆</text>
			</view>
			<view class="my-cell-item b-b-1 flex-c" @click="toLink(2)">
				<image class="my-cell-item-img" src="/static/images/dz-41@2x.png" mode=""></image>
				<text class="my-cell-item-desc">地址管理</text>
			</view>
			<!-- <view class="my-cell-item b-b-1 flex-c">
				<image class="my-cell-item-img" src="/static/images/shouye-3@2x.png" mode=""></image>
				<text class="my-cell-item-desc">用户角色</text>
			</view> -->
			<!-- <view class="my-cell-item b-b-1 flex-c">
				<image class="my-cell-item-img" src="/static/images/shouye-2@2x.png" mode=""></image>
				<text class="my-cell-item-desc">门店申请</text>
			</view> -->
	<!-- 		<view class="my-cell-item b-b-1 flex-c" @click="toLink(2)">
				<image class="my-cell-item-img" src="/static/images/dz-41@2x.png" mode=""></image>
				<text class="my-cell-item-desc">地址管理</text>
			</view> -->
			<view class="my-cell-item flex-c" @click="toLink(5)">
				<image class="my-cell-item-img" src="/static/images/qb@2x.png" mode=""></image>
				<text class="my-cell-item-desc">我的卡包</text>
			</view>
		</view>
		
		
	</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import { assetsInfo } from '@/http/my'
import type { IUserInfo, IAssetsInfo } from '@/types'

export default defineComponent({
	setup() {
		const statusBarHeight = ref(24)
		const state = reactive({
			userInfo: {} as IUserInfo | any,
			isLogin: false,
			addressMap: [
				{
					url: '/pages/login/index',
					routerName: '登录'
				},
				{
					url: '/pages/myPackge/setting/setting',
					routerName: '设置'
				},
				{
					url: '/pages/myPackge/addressManage/address',
					routerName: '地址管理'
				},
				{
					url: '/pages/myPackge/balance/balance',
					routerName: '余额'
				},
				{
					url: '/pages/myPackge/payment/goldenBean',
					routerName: '金豆'
				},
				{
					url: '/pages/myPackge/bankCard/bankCard',
					routerName: '我的卡包'
				},{
					url: '/pages/myPackge/reservation/reservation',
					routerName: '我的预约'
				}
			],
			assetsInfo:{} as IAssetsInfo,
		})
		onReady(() => {
			uni.getSystemInfo({
				success(res) {
					statusBarHeight.value = res.statusBarHeight as number 
				}
			})
		})
		
		onShow( async() => {
			uni.getStorage({
				key: 'userInfo',
				async success(res) {
					let data = JSON.parse(res.data) || null 
					if(data) {
						state.isLogin = true
						state.userInfo = data
						let res = await assetsInfo();
						state.assetsInfo = res.data
					} else {
						state.isLogin = false
						state.assetsInfo.goldBalance = 0
						state.assetsInfo.jindouBalance = 0
					}
				},
				fail(err) {
					state.userInfo = {} 
				}
			})
			
		})
		const toLink = (num: number) => {
			if(!state.userInfo?.nickName) {
				uni.showToast({ title: '请先登录', icon: 'error'})
				return
			}
			uni.navigateTo({
				url: state.addressMap[num].url
			})
		}
		
		const gotoOrder = (num: any) => {
			if(!state.userInfo?.nickName) {
				uni.showToast({ title: '请先登录', icon: 'error'})
				return
			}
			uni.navigateTo({
				url: `/pages/myPackge/order/index?status=${num}`
			})
		}
		
		const login = () => {
			uni.navigateTo({ url: '/pages/login/index' })
		}
		
		return {
			login,
			toLink,
			gotoOrder,
			statusBarHeight,
			...toRefs(state)
		}
	}
})
</script>
<style>page{ background: #f8f8fa; }</style>
<style lang="scss" scoped>
.my-wrapper{
	padding-bottom: 50px; 
	.my-info-container{
		background: linear-gradient(180deg,#ffc0d7, rgba(249,222,232,0.00) 96%);
		.my-property-wrapper{
			margin: 0 100rpx;
			.property-item{
				text-align: center;
				.property-item-num{
					font-size: 40rpx;
					font-weight: 700;
					margin-bottom: 10rpx;
				}
				.property-item-desc{ 
					font-size: 26rpx; 
					font-weight: 400; 
					color: #666666; 
				}
			}
		}
		.my-title{
			height: 88rpx;
			margin: 20rpx 0;
			text-align: center;
			font-size: 32rpx; 
			font-weight: 700; 
			color: #000000;
		}
		.my-infomation{
			margin: 0 26rpx 50rpx 58rpx;
			.my-avarta-nikname-account{
				.my-avarta-img{
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
				}
				.my-nicname{
					margin-left: 26rpx;
					.my-nikname-txt{ 
						font-size: 32rpx; 
						font-weight: 500; 
						color: #030303; 
						margin-bottom: 16rpx;
					}
					.my-account-info{
						.phone-img{
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
			.qr-setting-wrapper{
				.my-tools{
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.my-order-wrapper{
		margin: 24rpx;
		margin-top: 40rpx;
		.order-title{
			padding-bottom: 24rpx;
			margin-bottom: 32rpx;
		}
		.order-category-list{
			.order-category-item{
				text-align: center;
				font-size: 26rpx;
				color: #666666;
				.order-category-item-img{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
	.my-cell-list-wrapper{
		margin: 24rpx;
		.my-cell-item{
			height: 100rpx;
			.my-cell-item-img{
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}
			.my-cell-item-desc{
				font-size: 26rpx;
				color: #666666;
			}
		}
	}
	
}
</style>
